<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="mobile/common::head"></head>
<body>

<header>
    <!--页面顶部内容,登录登出等信息-->
    <div th:replace="mobile/common::page-top"></div>
    <!--搜索导航-->
    <div th:replace="mobile/common::search-nav"></div>

    <!--目录内容-->
    <div id="itemBox" style="width: 100%">
        <!--产品细节 detail-->
        <div class="aa1" th:style="'background-image: url(/static/index/img1/aa.jpg)'"><span
                id="Labelpart1">Part Information</span></div>

        <div style="min-height:260px;">
            <div style="width:45%;float: left" >
                <form>
                    <img th:src="${detail.image}" width="100%">
                    <li style="list-style-type:none; margin-top: 8px">
                        <div style="float: left" th:if="${detail.image1}">
                            <img th:src="${detail.image1}" width="45px" height="60px">
                        </div>
                        <div style="float: left" th:if="${detail.image2}">
                            <img th:src="${detail.image2}" width="45px" height="60px">
                        </div>
                        <div style="float: left" th:if="${detail.image3}">
                            <img th:src="${detail.image3}" width="45px" height="60px">
                        </div>
                        <div style="float: left" th:if="${detail.image4}">
                            <img th:src="${detail.image4}" width="45px" height="60px">
                        </div>
                        <div style="float: left" th:if="${detail.image5}">
                            <img th:src="${detail.image5}" width="45px" height="60px">
                        </div>
                        <div style="clear:both"></div>
                    </li>
                </form>
            </div>
            <div class="a22s">
                <li th:text="${'TYPE: &nbsp;&nbsp;' + detail.catalogEnname}"></li>
                <li th:text="${'PART NO: &nbsp;&nbsp;' + detail.productNo}"></li>
                <li>
                    <pre th:text="${'ATTRIBUTES: &nbsp;&nbsp;' + detail.attributes}"></pre>
                </li>
            </div>
            <div style="clear:both"></div>
        </div>
        <!-- OEM号码 -->
        <!--产品细节 detail-->
        <div class="aa1" th:style="'background-image: url(/static/index/img1/aa.jpg);margin-top:8px'"><span
                id="Labelpart1">OEM Number</span></div>
        <div class="a22s1">
            <li th:each="oem : ${detail.oemList}">
                <b th:text="${oem.brand}"></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b
                    th:text="${oem.refNo}"></b>
            </li>
        </div>
        <div class="aa1" th:style="'background-image: url(/static/index/img1/aa.jpg);margin-top:8px'"><span
                id="Labelpart1">APPLICATION</span></div>
        <div class="a22s1">
            <li th:each="car : ${detail.carList}">
                <b th:text="${car.brand}"></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b
                    th:text="${car.fullname}"></b>
            </li>
        </div>

        <div class="section_second">
            <!-- 第一层 -->
            <div class="section_second_header">
                <p class="section_second_header_img"></p>
                <div class="section_second_header_left">
                    <p></p>
                    <span class="">Similar Products</span>
                    <span> </span>
                </div>

            </div>
            <!--相似产品轮播图-->
            <div class="section_second_list">
                <div class="swiper-container swiper_section_second_list_left">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" th:each="item:${similarProducts}">
                            <div class="hot-sell-item">
                                <img th:src="${item.image}" alt="" style="width: 180px;height: 150px;">
                                <a th:href="@{${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName()} + '/page/detail/' + ${item.id} }"
                                   th:text="${item.productNo}"
                                   style="color: #1E9FFF;Display:block;text-align:center"
                                ></a>
                                <p th:text="${item.attributes}" style="Display:block;text-align:center"></p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev second_list">
                        <p></p>
                    </div>
                    <div class="swiper-button-next second_list">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!--页脚-->
<div th:replace="mobile/common::footer"></div>

</body>
<script type="text/javascript" th:src="@{/static/index/js/text.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/header.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/secend.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/index.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/left,top.js}"></script>
<script type="text/javascript" th:src="@{/static/index/js/catalogLoader.js}"></script>
<style>
    .aa1 {
        width: calc(100% - 12px);
        height: 30px;
        margin-bottom: 1px;
        line-height: 30px;
        font-weight: bold;
        padding-left: 12px;
        float: left;
    }

    .a22s {
        /*margin-left: 325px;*/
        float: right;
        width: 50%;
        margin-right: 0px;
        list-style: none;
        line-height: 30px;
        background-color: #cccccc;
        border-color: #cccccc;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
    }

    .a22s li {
        background-color: #ffffff;
        margin-bottom: 1px;
        padding-left: 15px;
    }

    .a22s1 {
        list-style: none;
        list-style-type: none;
        line-height: 30px;
    }

    .a22s1 li:first-child {
        margin-top: 8px;
    }

    .a22s1 li {
        background-color: #ffffff;
        margin-bottom: 1px;
        padding-left: 15px;
    }

</style>
</html>
